<template>
  <div class="commodity">
    <div class="tab-list flex-a">
      <div :class="tab == item.value ? 'active item' : 'item'" v-for="item in tabList" :key="item.value"
        @click="changeTab(item.value)">
        <span>{{ item.name }}</span>
        <i></i>
      </div>
    </div>
    <div class="box">
      <!-- 商品管理 -->
      <div v-if="tab=='ssgl'">
        
      </div>
      <!-- 品牌管理 -->
      <div v-if="tab=='ppgl'"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "commodity",
  components: {},
  data() {
    return {
      tab: 'ssgl',
      tabList: [
        {
          name: '商品管理',
          value: 'ssgl'
        },
        {
          name: '品牌管理',
          value: 'ppgl'
        }
      ]
    };
  },
  created() {

  },
  methods: {
    // tab切换
    changeTab(value) {
      this.tab = value
    }
  }
};
</script>
<style scoped lang="scss">
.tab-list {
  margin-left: 12px;

  .item {
    padding: 14px 27px;
    margin: 0 5px;
    background: #e1e1e1;
    color: #39393c;
    border-radius: 8px 8px 0 0;
    transition: all .3s;
    cursor: pointer;
    height: 46px;
    font-size: 14px;
    position: relative;

    span {
      position: relative;
      z-index: 9;
    }

    i {
      display: block;
      width: 0;
      height: 9px;
      border-radius: 2px;
      background-color: #ffdd03;
      position: absolute;
      z-index: 2;
      bottom: 10px;
      left: 50%;
      transform: translateX(-50%);
      opacity: 0;
    }
  }

  .item:hover {
    background: #fff;

    i {
      width: 57px;
      opacity: 1;
      transition: width .3s ease-in-out;
    }
  }

  .active {
    background: #fff;
    color: #333336;
    font-size: 15px;
    font-weight: bold;

    i {
      opacity: 1;
      width: 57px;
    }
  }
}

.box {
  background-color: #fff;
  padding: 20px 20px 60px 20px;
  border-radius: 12px;
  overflow-y: hidden;
}
</style>
